<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        
    </script>
	
	<script type="text/javascript">                                         
		
		$(document).ready(function() {
			
			$("#connect").click(function(){
				var socket = new WebSocket('ws://localhost:81/websession');

				socket.onopen = function() {
					alert('handshake successfully established. May send data now...');
				};
				
				socket.onclose = function() {
					alert('connection closed');
				};
				
				socket.onmessage = function(e){
				/*
					switch(e.data){
						case "initialized":
							
						break;
						
					}
				*/	
				
					var canvas = document.getElementById("screen");
					var sc = canvas.getContext("2d");
					var w = 570;
					
					var chain = e.data;
					sc.Restore();
					var data = new Array();
					data = chain.split(";");
					
					sc.moveTo(0,0);
					for(var i=0 ; i < 190 ; i=i+1){
						y = parseFloat(data[i].replace(",","."));
						//$("#result").append(i+" - "+y+"<br>");
						sc.lineTo(i,y);
					}
					sc.stroke();
				};				
			});
			
		});
	</script> 
</head>
<body>

<div>
	<canvas id="screen" width="570" height="200"></canvas>
</div>
<div id="result"></div>
<div>
	<div>Att:<input type="text" value="10.0" id="att" /></div>
	<div>LF:<input type="text" value="" id="lf" /></div>
	<div>HF:<input type="text" value="" id="hf" /></div>
</div>
<div>
	<input type="submit" value="Connect" id="connect" />
</div>

</body>
</html>